import styles from "@pages/home/widgets/channel/styles/styles.module.less";
import classNames from "classnames";
import useGuestChannels from "@pages/home/hooks/useGuestChannels";
import useChannelScroll from "@pages/home/channel/common/scroll";
import { useNavigate, useParams } from "react-router-dom";


export default function GuestChannel() {
    // 获取路由参数
    const { cid } = useParams();
    // 获取用于实现页面跳转的方法
    const navigate = useNavigate();
    // 获取访客频道列表
    const guestChannels = useGuestChannels();
    // 获取频道列表滚动逻辑
    const { scrollContainerRef, scrollHandler } = useChannelScroll();
    // 渲染视图
    return (
        <div className={styles.list} ref={scrollContainerRef}>
            {guestChannels.map((channel) => (
                <div
                    className={classNames(styles.item, {
                        [styles.active]: channel.id === Number(cid),
                    })}
                    onClick={() => {
                        navigate(`/${channel.id}`);
                    }}
                >
                    {channel.name}
                </div>
            ))}
        </div>
    );
}